<template>
  <div v-if="menuInfo !== []" class="menuBar">
    <el-scrollbar>
      <el-menu
        :default-active="dActive"
        class="el-menu-vertical"
        background-color="#2e363e"
        text-color="#ffffff"
        :collapse="collapse"
        @select="select"
        unique-opened router>
        <label v-for="(item, index) in menuInfo">
          <el-menu-item v-if="item.childMenuVOList == null" :key="item.id"
                        :index="(typeof item.id) === String ? item.id : item.id.toString()"
                        :route="item.menuUrl ? item.menuUrl : ''">
            <!--<i v-if="item.icon && item.icon !== ''" :class="item.icon"></i>-->
            <span>{{item.menuName}}</span>
          </el-menu-item>
          <el-submenu v-else :key="item.id" :index="(typeof item.id) === String ? item.id : item.id.toString()"
                      class="c-gray">
            <template slot="title">
              <i v-if="item.icon && item.icon !== ''" :class="'jxfIcon icon-'+ item.icon"></i>
              <span>{{item.menuName}}</span>
            </template>
            <label v-if="item.childMenuVOList && item.childMenuVOList !== null" v-for="itemC in item.childMenuVOList">
              <el-menu-item v-if="itemC.menuUrl && itemC.menuUrl !== ''" :key="itemC.id"
                            :index="(typeof itemC.id) === String ? itemC.id : itemC.id.toString()"
                            :route="itemC.menuUrl">
                <i v-if="itemC.icon && itemC.icon !== ''" :class="itemC.icon"></i>
                <span>{{itemC.menuName}}</span>
              </el-menu-item>
            </label>
          </el-submenu>
        </label>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
  export default {
    name: "MenuBar",
    props: {
      menuInfo: {
        default: () => {
          return []
        }
      },
      defaultActive: {
        type: String,
        default: "16"
      }
    },
    watch: {
      defaultActive(val) {
        this.dActive = val
      }
    },
    data() {
      return {
        collapse: false,
        dActive: this.defaultActive
      }
    },
    methods: {
      setCollapse() {
        if (document.body.clientWidth <= 768) {
          this.collapse = true;
        } else {
          this.collapse = false;
        }
      },
      select(index) {
        this.dActive = index
      }
    },
    created() {
      this.setCollapse()
    },
    mounted() {

    }
  }
</script>

<style lang="scss" scoped>
  .menuBar {
    overflow: hidden;
    .el-scrollbar {
      border-top: 1px solid rgba(0, 0, 0, 0.7);
      height: calc(100vh - 51px);
      .el-menu {
        min-height: calc(100vh - 51px);
        min-width: 140px;
        .jxfIcon {
          padding-right: 5px;
        }
      }
    }
  }
</style>
